<template>
  <div class="map-container">
    <el-amap :center="center" :zoom="zoom" :rotation="rotation">
      <!-- 卫星图层 -->
      <el-amap-layer-satellite :visible="satelliteVisible" />

      <!-- 多边形区域 -->
      <el-amap-polygon
        v-for="(region, index) in regions"
        :key="'polygon-' + index"
        :path="region.path"
        :fill-color="region.color"
        :fill-opacity="0.3"
        :stroke-color="'#33ffd0'"
        :stroke-weight="2"
        :editable="isEditable"
      />

      <!-- 标记点 -->
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="'marker-' + index"
        :position="marker.position"
        :label="{
          content: '',
          direction: 'top'
        }"
        @click="handleMarkerClick(marker)"
      >
        <div class="custom-marker">
          <div class="marker-icon">
            <el-icon class="icon">
              <House v-if="marker.icon === 'House'" />
              <Monitor v-if="marker.icon === 'Monitor'" />
              <OfficeBuilding v-if="marker.icon === 'OfficeBuilding'" />
              <Van v-if="marker.icon === 'Van'" />
            </el-icon>
          </div>
        </div>
      </el-amap-marker>

      <!-- 信息窗体 -->
      <el-amap-info-window
        v-if="currentInfo"
        :position="currentInfo.position"
        :visible="infoWindowVisible"
        @close="closeInfoWindow"
      >
        <div class="info-window">
          <div class="info-title">
            {{ currentInfo.title }}
            <el-icon class="close-icon" @click="closeInfoWindow"><Close /></el-icon>
          </div>
          <div class="info-content">
            <div class="info-item">
              <span class="label">负责人：</span>
              <span>{{ currentInfo.manager }}</span>
            </div>
            <div class="info-item">
              <span class="label">营业时间：</span>
              <span>{{ currentInfo.time }}</span>
            </div>
            <div class="info-item">
              <span class="label">主营：</span>
              <span>{{ currentInfo.business }}</span>
            </div>
          </div>
        </div>
      </el-amap-info-window>

      <!-- 文本标签 -->
      <el-amap-text
        v-for="(region, index) in regions"
        :key="'text-' + index"
        :position="getPolygonCenter(region.path)"
        :text="region.name"
        :offset="[-25, 0]"
        :text-style="{
          color: '#33ffd0',
          background: 'rgba(18, 161, 127, 0.2)',
          border: '1px solid rgba(51, 255, 208, 0.3)',
          borderRadius: '4px',
          padding: '4px 8px',
          fontSize: '12px',
          boxShadow: '0 2px 8px rgba(51, 255, 208, 0.2)',
        }"
        :visible="true"
        :draggable="false"
      />
    </el-amap>

    <!-- 工具栏 -->
    <div class="toolbar">
      <button @click="toggleSatellite" class="toolbar-btn">
        <el-icon><View /></el-icon>
        <span>{{ satelliteVisible ? "隐藏卫星图" : "显示卫星图" }}</span>
      </button>
      <button @click="toggleEditable" class="toolbar-btn">
        <el-icon><Edit /></el-icon>
        <span>{{ isEditable ? "锁定区域" : "解锁区域" }}</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  View,
  Edit,
  Close,
  Shop,
  VideoCamera,
  Box,
  User,
  House,
  Monitor,
  OfficeBuilding,
  Van
} from '@element-plus/icons-vue'
import {
  ElAmap,
  ElAmapLayerSatellite,
  ElAmapPolygon,
  ElAmapText,
  ElAmapMarker,
  ElAmapInfoWindow
} from "@vuemap/vue-amap";

// 修改标记点类型定义
interface Marker {
  position: [number, number];
  icon: 'House' | 'Monitor' | 'OfficeBuilding' | 'Van';  // 限制图标类型
  title: string;
  manager: string;
  time: string;
  business: string;
}

// 地图初始配置
// const center = ref<[number, number]>([112.447101, 39.37386]);
const center = ref<[number, number]>([112.443001, 39.37686]);
const zoom = ref(16.3);
const rotation = ref(-3);
const satelliteVisible = ref(true);
const isEditable = ref(false);

// 区域数据
const regions = ref<
  Array<{
    path: [number, number][];
    color: string;
    name: string;
  }>
>([
  {
    path: [
      [112.444526, 39.375843],
      [112.444397, 39.374358],
      [112.445427, 39.374317],
      [112.445513, 39.375785],
    ],
    color: "rgba(51, 255, 208, 0.3)",
    name: "A区",
  },
  {
    path: [
      [112.44871, 39.376116],
      [112.44851, 39.374256],
      [112.449609, 39.374197],
      [112.44966, 39.37614],
    ],
    color: "rgba(46, 213, 115, 0.3)",
    name: "B区",
  },
  {
    path: [
      [112.442187, 39.376387],
      [112.442026, 39.373717],
      [112.44415, 39.373617],
      [112.444354, 39.376329],
    ],
    color: "rgba(255, 165, 2, 0.3)",
    name: "C区",
  },
  {
    path: [
      [112.450202, 39.376132],
      [112.450062, 39.374316],
      [112.45209, 39.374291],
      [112.452186, 39.376074],
    ],
    color: "rgba(255, 71, 87, 0.3)",
    name: "D区",
  },
]);

// 标记点数据
const markers = ref<Marker[]>([
  {
    position: [112.444397, 39.375343],
    icon: 'House',
    title: '农户小院 #1',
    manager: '张三',
    time: '全天',
    business: '水稻种植'
  },
  {
    position: [112.449609, 39.375197],
    icon: 'House',
    title: '农户小院 #2',
    manager: '李四',
    time: '全天',
    business: '玉米种植'
  },
  {
    position: [112.442026, 39.374717],
    icon: 'OfficeBuilding',
    title: '仓储中心',
    manager: '王五',
    time: '全天24小时',
    business: '农产品存储'
  },
  {
    position: [112.450062, 39.375316],
    icon: 'Monitor',
    title: '监控中心',
    manager: '系统自动',
    time: '全天24小时',
    business: '区域监控'
  },
  {
    position: [112.452186, 39.375074],
    icon: 'Van',
    title: '物流中心',
    manager: '赵六',
    time: '8:00-18:00',
    business: '农产品运输'
  }
]);

// 信息窗体状态
const currentInfo = ref<Marker | null>(null);
const infoWindowVisible = ref(false);

// 切换区域编辑状态
const toggleEditable = () => {
  isEditable.value = !isEditable.value;
};

// 切换卫星图层显示/隐藏
const toggleSatellite = () => {
  satelliteVisible.value = !satelliteVisible.value;
};

// 获取多边形中心
const getPolygonCenter = (path: [number, number][]) => {
  let area = 0;
  let centerX = 0;
  let centerY = 0;

  for (let i = 0, len = path.length; i < len; i++) {
    const [x1, y1] = path[i];
    const [x2, y2] = path[(i + 1) % len];
    const cross = x1 * y2 - x2 * y1;

    area += cross;
    centerX += (x1 + x2) * cross;
    centerY += (y1 + y2) * cross;
  }

  area /= 2;
  centerX /= 6 * area;
  centerY /= 6 * area;

  return [centerX, centerY] as [number, number];
};

// 处理标记点点击
const handleMarkerClick = (marker: Marker) => {
  currentInfo.value = marker;
  infoWindowVisible.value = true;
};

// 关闭信息窗体
const closeInfoWindow = () => {
  infoWindowVisible.value = false;
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgba(18, 161, 127, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(18, 161, 127, 0.2);
  border: 1px solid rgba(51, 255, 208, 0.3);
  border-radius: 4px;
  color: #33ffd0;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toolbar-btn:hover {
  background: rgba(51, 255, 208, 0.2);
  border-color: rgba(51, 255, 208, 0.5);
  transform: translateY(-1px);
}

.toolbar-btn .el-icon {
  font-size: 14px;
}

:deep(.amap-logo) {
  display: none !important;
}

:deep(.amap-copyright) {
  display: none !important;
}

.custom-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marker-icon {
  width: 32px;
  height: 32px;
  background: rgba(18, 161, 127, 0.9);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 8px rgba(51, 255, 208, 0.3);
  border: 1px solid rgba(51, 255, 208, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.marker-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(51, 255, 208, 0.4);
  background: rgba(51, 255, 208, 0.9);
}

.marker-icon .icon {
  font-size: 18px;
}

.info-window {
  min-width: 200px;
  background: rgba(18, 161, 127, 0.9);
  border-radius: 4px;
  padding: 0;
  color: #fff;
}

.info-title {
  font-size: 14px;
  font-weight: bold;
  padding: 8px 12px;
  background: rgba(51, 255, 208, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-icon {
  cursor: pointer;
  font-size: 16px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.close-icon:hover {
  opacity: 1;
}

.info-content {
  padding: 12px;
}

.info-item {
  margin-bottom: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  color: rgba(255, 255, 255, 0.7);
  margin-right: 8px;
  min-width: 60px;
}

:deep(.amap-info-content) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

:deep(.amap-info-sharp) {
  display: none !important;
}

:deep(.amap-info-close) {
  display: none !important;
}
</style>
